<template>
  <div class style="height: 100%;">
    <div
      v-if="showInfo"
      class="cardnengliudiv"
      :style="{ left: (winPos[0] - 0) + 'px', bottom: (winPos[3] - 20) + 'px' }"
    >
      <i
        class="el-icon-close"
        style="position: absolute;right: 10px;top: 10px;cursor: pointer;pointer-events: auto;"
        @click="closebox()"
      ></i>
      <div>
        能流生产图
      </div>
      <div :id="uniqueID" style="height: 160px;width: 95%;" />
    </div>
  </div>
</template>
<script>
import uuidv1 from "uuid/v1";

import echarts from 'echarts'

export default {
  name: "cardnengliu1",
  props: {
    diahtml: "",
    options: {}
  },
  components: {},
  data() {
    return {
      winPos: [0, 0, 0, 0],
      showInfo: true,
      uniqueID: ""
    };
  },
  computed: {},
  created() {
    this.uniqueID = uuidv1();
  },
  watch: {
    winPos: {
      handler: function(n, o) {
        //判断位置与窗口偏移
        
        let width = document.documentElement.clientWidth
        let height = document.documentElement.clientHeight

        let offwidth = n[0]
        let offheight = n[1]
        
        let reswidth = width - offwidth
        let resheight = height - offheight

        if (reswidth < 120 || resheight < 20 || reswidth > width || resheight >  height) {
          this.showInfo = false
        }else{
          this.showInfo = true
          this.loadchart()

        }

      }
    }
  },
  mounted() {


    let earth = this.$root._earth;
    let _this = this

    this.$root._earth.sceneTree.root.children.push({
      ref: this.options.uid,
      czmObject: {
        name: "Pin1",
        xbsjType: "Pin",
        xbsjGuid: this.options.uid,
        position: [1.9017005694855162, 0.5972477268978722, 488.7695178987821],
        near: 300,
        show: true,
        lineShow: true,
        scale: 0.0001,
        lineHeight: 100,
      }
    });

    let position = [
      this.options.position[0],
      this.options.position[1],
      this.options.position[2] + 180,
    ];

    // this.$parent.pinarr.push(this.options.uid);
    let pin1 = this.$root._earth.sceneTree.$refs[this.options.uid].czmObject;
    pin1.position = position
    XE.MVVM.track(this, "winPos", pin1, "winPos");


    pin1.disposers.push(
      XE.MVVM.watch(
        () => ({
          enabled: pin1.enabled,
          position: [...earth.camera.position],
        }),
        () => {
          // xepd: xepositionDistance的缩写
          // pin1.position.xepd(earth.camera.position): 计算相机和pin之间的距离
          const d = pin1.position.xepd(earth.camera.position);
          if (d > 10000 && pin1.enabled) {
            // _this.showInfo = false;
            // pin1.show = false;
            _this.closebox()
          } else {
          }
        }
      )
    );




    this.loadchart()




  },
  methods: {

    loadchart(){
      var myChart = echarts.init(document.getElementById(this.uniqueID))
    var scale = this.$root.setting.scale
    var option = {
      tooltip: null,
      series: {
        type: 'sankey',
        // layout: 'none',
        focusNodeAdjacency: 'allEdges',
        label: {
          normal: {
            fontSize: 24 * scale,
            color: '#A0C8DB'
          }
        },
        lineStyle: {
          borderColor: '#ddd',
          borderWidth: 1,
          color: 'source'
        },
        data: [{
          name: '燃烧',
          itemStyle: {
            color: '#39CDA1',
            borderColor: '#39CDA1'
          },
          textStyle: {
            color: '#ffffff'
          },
          value: 15
        }, {
          name: '购电',
          itemStyle: {
            color: '#18A2E2',
            borderColor: '#18A2E2'
          }

        }, {
          itemStyle: { color: '#39CDA1',
            borderColor: '#39CDA1' },
          name: 'CHP'
        }, {
          itemStyle: { color: '#ECAE33',
            borderColor: '#ECAE33' },
          name: '电力总线'
        }, {
          itemStyle: { color: '#E4E26A',
            borderColor: '#E4E26A' },
          name: '蒸汽总线'
        }, {
          itemStyle: { color: '#4FC7FF',
            borderColor: '#4FC7FF' },
          name: '密炼'
        }, {
          itemStyle: { color: '#4FC7FF',
            borderColor: '#4FC7FF' },
          name: '其他'
        }, {
          itemStyle: { color: '#18A2E2',
            borderColor: '#18A2E2' },
          name: '三厂'
        }, {
          itemStyle: { color: '#137FD3',
            borderColor: '#137FD3' },
          name: '废弃'
        }, {
          itemStyle: { color: '#1484DC',
            borderColor: '#1484DC' },
          name: '四厂'
        }, {
          itemStyle: { color: '#18A2E2',
            borderColor: '#18A2E2' },
          name: '六厂'
        }, {
          itemStyle: { color: '#137FD3',
            borderColor: '#137FD3' },
          name: '五厂'
        }, {
          itemStyle: { color: '#137FD3',
            borderColor: '#137FD3' },
          name: '二厂'
        }],
        links: [{
          source: '燃烧',
          target: 'CHP',
          value: 20
        }, {
          source: '购电',
          target: 'CHP',
          value: 3
        }, {
          source: 'CHP',
          target: '电力总线',
          value: 18
        }, {
          source: 'CHP',
          target: '蒸汽总线',
          value: 8
        }, {
          source: '电力总线',
          target: '密炼',
          value: 4
        }, {
          source: '电力总线',
          target: '其他',
          value: 2
        }, {
          source: '电力总线',
          target: '三厂',
          value: 2
        }, {
          source: '电力总线',
          target: '废弃',
          value: 2
        }, {
          source: '电力总线',
          target: '四厂',
          value: 2
        }, {
          source: '蒸汽总线',
          target: '其他',
          value: 2
        }, {
          source: '蒸汽总线',
          target: '三厂',
          value: 2
        }, {
          source: '蒸汽总线',
          target: '废弃',
          value: 2
        }, {
          source: '蒸汽总线',
          target: '四厂',
          value: 2
        }, {
          source: '蒸汽总线',
          target: '六厂',
          value: 2
        }, {
          source: '蒸汽总线',
          target: '五厂',
          value: 2
        }, {
          source: '蒸汽总线',
          target: '二厂',
          value: 2
        }]
      }
    }
    myChart.setOption(option)
    window.addEventListener('resize', () => {
      myChart.resize()
    })
    },

    closebox() {
      //删除pin数组
      // let pinarr = _.cloneDeep(this.$parent.pinarr);
      // pinarr.map((item, index) => {
      //   if (item == this.options.uid) {
      //     this.$parent.pinarr.splice(index, 1);
      //   }
      // });
      //删除_earth.children对象
      this.$root._earth.sceneTree.root.children.map((eactpin, index) => {
        if (eactpin.ref == this.options.uid) {
          this.$root._earth.sceneTree.root.children.splice(index, 1);
        }
      });

      // let earthchild = this.$root._earth.sceneTree.root.children.map(item =>{
      //   return item.ref
      // })
      // console.log(earthchild);
      
      // earthchild.map((eactpin, index) => {
      //   if (eactpin == this.options.uid) {
      //     this.$root._earth.sceneTree.$refs[this.options.uid].destroy()
      //     // this.$root._earth.sceneTree.root.children.splice(index, 1);
      //   }
      // });

      //删除msgbox数组对应元素
      let msgboxarr = _.cloneDeep(this.$parent.dependlistArr.cardnengliu);
      msgboxarr.map((item, index) => {
        if (item.uid == this.options.uid) {
          this.$parent.dependlistArr.cardnengliu.splice(index, 1);
        }
      });
    }
  }
};
</script>
<style lang='scss' scoped>
.cardnengliudiv{
  position: absolute;
  width: 400px;
  min-height: 200px;
  color: white;
  background-image: url("/configuration/cesium//linglong/nengliu.png");
  background-size: 100% 100%;
  padding: 5px;
  border-radius: 5px;
  pointer-events: none;
  // cursor: pointer;
}
</style>